
<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
   
    
    <el-button v-if="hide">
              <router-link to="/login">登录</router-link>
      </el-button>
            
      <el-button v-if="hide">
              <router-link to="/register">注册</router-link>
      </el-button>

      <el-button v-if="msg" @click="outlogin">
              注销
      </el-button>

      <el-button v-if="msg">
            <router-link to="/roomlist">开始游戏</router-link>
      </el-button>
    
  </div>
</template>



<script >

import axios from 'axios'


export default {
  name: 'HelloWorld',
 // props: {
 //   msg: String
 // }
data(){
	return{msg:'',hide:'1'};
},
methods:{
      getMessage(){
        const path = '/api';
        axios.get(path).then(res=>{
          this.msg=res.data.mess;		
          if (this.msg){
            this.hide=''
          }
          }).catch(error =>{
            console.error(error);
              });
          },
      outlogin:function(){
              
              //定义请求路径
              let url='/api/login/outlogin';
              //定义请求参数
              let params={
                  methodName:'out_login'
              };
              console.log(params);
              //发起ajax请求GET
              axios.get(url,{params:params}).then(resp=>{
                console.log(resp);
                let data=resp.data;
                this.$message({
                    message: '',
                    type: data.code==1?'success':'error'
                });
                if(data.code==1){
                  sessionStorage.removeItem('accessToken')
                  this.$router.push('/login');
                }
              }).catch(err=>{
                console.log(err);
              });
            },
	},

created(){
	this.getMessage();
	}
};



    

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>
